import 'package:firstflutterdemo/widgetdemo01/MyMaterialApp.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart' show debugPaintSizeEnabled;

/*

  调试页面布局好用的办法
  https://blog.csdn.net/tangdou369098655/article/details/120298875


  Flutter开发之基础知识
  https://zhuanlan.zhihu.com/p/75446285

  flutter加载本地图片
  https://blog.csdn.net/Over_dose/article/details/123211524


  对齐 widgets
你可以使用 mainAxisAlignment 和 crossAxisAlignment 属性控制行或列如何对齐其子项。对于一行来说，主轴水平延伸，交叉轴垂直延伸。对于一列来说，主轴垂直延伸，交叉轴水平延伸。



调整 widgets 大小
当某个布局太大而超出屏幕时，受影响的边缘会出现黄色和黑色条纹图案。这里有一个行太宽的 例子：

通过使用 Expanded widget，可以调整 widgets 的大小以适合行或列。要修复上一个图像行对其渲染框来说太宽的示例，可以用 Expanded widget 把每个图像包起来。

 */

void main() {
  debugPaintSizeEnabled = true; //调试布局重点代码
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  final String pic1 = 'images/row_column/pic1.jpg';
  final String pic2 = 'images/row_column/pic2.jpg';
  final String pic3 = 'images/row_column/pic3.jpg';
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter layout demo',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Flutter layout demo'),
        ),
        // Change to buildColumn() for the other column example
        // body: Center(child: buildRow()),
        body: Center(child: buildColumn()),
      ),
    );
  }

  Widget buildRow() =>
      // #docregion Row
      Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
          Image.asset(pic1),
          Image.asset(pic2),
          Image.asset(pic3)
        ],
      );

  // #enddocregion Row

  Widget buildColumn() =>
      // #docregion Column
      Column(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: [
          Image.asset(pic1),
          Image.asset(pic2),
          Image.asset(pic3)
        ],
      );
// #enddocregion Column
}
